<template>
  <el-upload v-model:file-list="fileList" drag multiple>
    <el-icon class="color-el-placeholder! text-16!"><EpUploadFilled /></el-icon>
    <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
    <template #tip>
      <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
    </template>
  </el-upload>
</template>

<script setup lang="ts">
import { EpUploadFilled } from '@/assets/icons'
import type { UploadUserFile } from 'element-plus'

const files = defineModel<FormGlobalFile[]>({
  default: () => []
})

const fileList = shallowRef<UploadUserFile[]>([])

watchEffect(() => {
  files.value = fileList.value.map((v) => ({
    name: v.name,
    response: v.response,
    size: v.size,
    type: v.raw?.type || ''
  }))
})
</script>

<style scoped lang="scss"></style>
